<template>
  <a-card hoverable :bordered="false" size="small">
    <div style="text-align: center">
      <a-avatar :size="64" :src="Avatar"> </a-avatar>
    </div>
    <ul class="user-info">
      <li>
        <div style="height: 100%">
          <LoginOutlined /> 登录账号
          <div class="user-right">{{ user.username }}</div>
        </div>
      </li>
      <li>
        <VerifiedOutlined /> 用户昵称
        <div class="user-right">{{ user.nickName }}</div>
      </li>
      <li>
        <ApartmentOutlined /> 所属部门
        <div class="user-right">{{ user.dept.name }}</div>
      </li>
      <li>
        <PhoneOutlined /> 手机号码
        <div class="user-right">{{ user.phone }}</div>
      </li>
      <li>
        <FileProtectOutlined /> 用户邮箱
        <div class="user-right">{{ user.email }}</div>
      </li>
      <li>
        <PropertySafetyOutlined /> 安全设置
        <div class="user-right">
          <a @click="updatePass">修改密码</a>
        </div>
      </li>
    </ul>
    <UpdatePass ref="updatePassRef" />
  </a-card>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import {
    UserOutlined,
    LoginOutlined,
    FileProtectOutlined,
    ApartmentOutlined,
    PhoneOutlined,
    VerifiedOutlined,
    PropertySafetyOutlined,
  } from '@ant-design/icons-vue';
  import { useUserStore } from '/@/store/modules/user';
  import UpdatePass from './updatePass.vue';
  import Avatar from '/images/avatar.png';

  const userStore = useUserStore();

  export default defineComponent({
    components: {
      UserOutlined,
      LoginOutlined,
      FileProtectOutlined,
      ApartmentOutlined,
      PhoneOutlined,
      VerifiedOutlined,
      PropertySafetyOutlined,
      UpdatePass,
    },
    setup() {
      const user = userStore.getUser;

      const updatePassRef = ref();
      const updatePass = () => {
        updatePassRef.value.open();
      };
      return { user, updatePass, updatePassRef, Avatar };
    },
  });
</script>
<style lang="less" scoped>
  .user-info {
    padding-left: 0;
    list-style: none;
    li {
      border-bottom: 1px solid #f0f3f4;
      padding: 11px 0;
      font-size: 13px;
    }
    .user-right {
      float: right;
      a {
        color: #317ef3;
      }
    }
  }
</style>
